<template>
  <!-- 遍历数组 -->
  <template v-for="(item, index) in dataList" :key="item">
    <div>这是第{{ index }}个{{ item }}</div>
  </template>
  <!-- 直接遍历 -->
  <div v-for="(item, index) in dataList" :key="item">{{ item }}-{{ index }}</div>
  <hr />
  <!-- 遍历对象 -->
  <template v-for="(value, key, index) in obj" :key="key">
    <div>{{ key }}是{{ value }}-{{ index }}</div>
  </template>
  <hr />

  <!-- 遍历数字 -->
  <template v-for="(num, index) in 10" :key="index">
    <div>{{ index }}是{{ num }}</div>
  </template>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const dataList = ref([1, 2, 3])
    const obj = reactive({
      name: 'zjd',
      age: 18,
    })

    return { dataList, obj }
  },
}
</script>
<style scoped></style>
